<template>
  <div>
    <div>
      <el-button type="primary"
                 @click="openDialog('insert')">添加</el-button>
      <el-button type="primary"
                 @click="clearToken">清除token</el-button>
    </div>
    <dialogFromVue ref="dialogFrom"></dialogFromVue>
    <dialogInfoVue ref="dialogInfo"></dialogInfoVue>
    <dialogPullVue ref="dialogPull"></dialogPullVue>
    <listVue :tableData="tableData"
             @refresh="getGoodsList()"
             @openDialogInfo="openInfo($event)"
             @openDialogPull="openDialogPull($event)"></listVue>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="queryFrom.page"
                   :page-sizes="[2, 4, 5, 10]"
                   :page-size="queryFrom.size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total"
                   style="margin-top: 20px;">

    </el-pagination>
  </div>
</template>

<script>
import listVue from './component/list.vue';
import dialogFromVue from './component/dialogFrom.vue';
import dialogInfoVue from './component/dialogInfo.vue';
import dialogPullVue from './component/dialogPull.vue';
export default {
  components: {
    listVue, dialogFromVue, dialogInfoVue, dialogPullVue
  },
  created () {
    this.getGoodsList();

    this.axios.post('http://localhost:8090/test', {}).then(res => {
      console.log("-----------------++++++++++++++++", res);
    })
  },
  data () {
    return {
      tableData: [],
      queryFrom: {
        page: 1,
        size: 4
      },
      total: 0
    }
  },
  methods: {
    openDialog (params) {
      this.$refs.dialogFrom.open(params);
    },
    getGoodsList () {
      this.axios.post('/goods/query', this.queryFrom).then((res) => {
        console.log(res);
        res.data.records.forEach(e => {
          if (e.status == 'active') {
            e.delivery = true
          } else if (e.status == 'unactive') {
            e.delivery = false
          } else {
            e.delivery = false
          }
        })
        this.tableData = res.data.records
        // this.total = res.data.data.length
        this.total = res.data.total
      })
    },
    openInfo (id) {
      this.$refs.dialogInfo.open(id)
    },
    openDialogPull (id) {
      this.$refs.dialogPull.open(id)
    },
    handleSizeChange (size) {
      console.log("-------handleSizeChange------:", size);
      this.queryFrom.size = size;
      this.getGoodsList();
    },
    handleCurrentChange (page) {
      console.log("-------handleCurrentChange------:", page);
      this.queryFrom.page = page;
      this.getGoodsList();
    },
    clearToken () {
      localStorage.removeItem("token");
      let token = localStorage.getItem("token");
      console.log("------------:token:", token);
    }

  }

}
</script>

<style lang="less" scoped>
</style>